<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  [help_message_content]="'alert.help.center' | i18n"
  [guild_link]="'alert.help.center.link' | i18n"
  [module_name]="'menu.alert.center'"
  [icon_name]="'alert'"
></app-help-message-show>

<nz-divider></nz-divider>

<app-toolbar>
  <ng-template #center>
    <div class="center-content">
      <button nz-button (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
        <i nz-icon nzType="sync" nzTheme="outline"></i>
      </button>

      <div class="search-wrapper">
        <nz-input-group [nzPrefix]="prefixTemplate" class="search-input">
          <input
            type="text"
            nz-input
            [(ngModel)]="filterContent"
            (keydown.enter)="loadAlertsTable()"
            [placeholder]="'alert.center.search' | i18n"
          />
        </nz-input-group>
        <ng-template #prefixTemplate>
          <i nz-icon nzType="search"></i>
        </ng-template>
      </div>

      <nz-select
        class="mobile-hide"
        nzAllowClear
        [nzPlaceHolder]="'alert.center.filter-status' | i18n"
        [(ngModel)]="filterStatus"
        (ngModelChange)="loadAlertsTable()"
      >
        <nz-option [nzLabel]="'alert.status.firing' | i18n" [nzValue]="'firing'"></nz-option>
        <nz-option [nzLabel]="'alert.status.resolved' | i18n" [nzValue]="'resolved'"></nz-option>
      </nz-select>
    </div>
  </ng-template>
</app-toolbar>

<div class="alert-cards">
  <nz-card *ngFor="let group of groupAlerts" class="alert-card" [class]="'status-' + group.status" [nzBordered]="false">
    <!-- Alert Group Header -->
    <div class="alert-header">
      <div class="alert-info">
        <div class="alert-labels">
          <nz-tag *ngFor="let item of group.groupLabels | keyvalue">{{ item.key }}:{{ item.value }}</nz-tag>
        </div>
        <div class="alert-meta-info">
          <span class="alert-time">
            <i nz-icon nzType="clock-circle" nzTheme="outline"></i>
            {{ group.gmtUpdate | date : 'yyyy-MM-dd HH:mm:ss' }}
          </span>
        </div>
      </div>
      <div class="alert-actions">
        <!--        <button-->
        <!--          *ngIf="group.status != 'firing'"-->
        <!--          nz-button-->
        <!--          (click)="onMarkReadOneAlert(group.id)"-->
        <!--          nz-tooltip-->
        <!--          [nzTooltipTitle]="'alert.center.deal' | i18n"-->
        <!--        >-->
        <!--          <i nz-icon nzType="down-circle" nzTheme="outline"></i>-->
        <!--        </button>-->
        <!--        <button-->
        <!--          *ngIf="group.status == 'firing'"-->
        <!--          nz-button-->
        <!--          (click)="onMarkUnReadOneAlert(group.id)"-->
        <!--          nz-tooltip-->
        <!--          [nzTooltipTitle]="'alert.center.no-deal' | i18n"-->
        <!--        >-->
        <!--          <i nz-icon nzType="up-circle" nzTheme="outline"></i>-->
        <!--        </button>-->
        <button nz-button nzDanger (click)="onDeleteOneAlert(group.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
      </div>
    </div>

    <!-- Alert Details -->
    <div class="alert-details">
      <nz-collapse nzGhost>
        <nz-collapse-panel
          #panel
          *ngFor="let item of group.alerts"
          [nzHeader]="alertHeader"
          [nzExtra]="alertExtra"
          [nzActive]="false"
          [style]="'border-left-color:' + (item.status == 'firing' ? '#ff4d4f' : '#52c41a')"
          [nzExpandedIcon]="expandedIcon"
        >
          <ng-template #alertHeader>
            <div class="alert-content">
              <nz-tag *ngIf="item.labels.alertname" style="font-size: 14px; margin-right: 8px">{{ item.labels.alertname }}</nz-tag>
              <span>{{ item.content }}</span>
            </div>
          </ng-template>
          <ng-template #alertExtra>
            <div class="alert-time">{{
              item.endAt ? (item.endAt | date : 'yyyy-MM-dd HH:mm:ss') : (item.activeAt | date : 'yyyy-MM-dd HH:mm:ss')
            }}</div>
          </ng-template>
          <ng-template #expandedIcon>
            <i nz-icon [nzType]="panel.nzActive ? 'caret-down' : 'caret-right'"></i>
          </ng-template>

          <!-- Trigger Times -->
          <div class="detail-section" *ngIf="item.triggerTimes">
            <span class="alert-count" *ngIf="group?.alerts">
              <i style="margin-right: 4px" nz-icon nzType="alert" nzTheme="outline"></i>
              {{ 'alert.center.time.tip' | i18n : { times: item.triggerTimes } }}
            </span>
          </div>

          <!-- Status -->
          <div class="detail-section">
            <div class="section-title">{{ 'alert.center.status' | i18n }}</div>
            <div class="alert-status">
              <nz-tag [nzColor]="item.status === 'firing' ? 'error' : 'success'">
                {{ item.status === 'firing' ? ('alert.status.firing' | i18n) : ('alert.status.resolved' | i18n) }}
              </nz-tag>
            </div>
          </div>

          <!-- Labels -->
          <div class="detail-section" *ngIf="item.labels">
            <div class="section-title">{{ 'alert.center.labels' | i18n }}</div>
            <div class="alert-labels">
              <nz-tag *ngFor="let label of item.labels | keyvalue">{{ label.key }}:{{ label.value }}</nz-tag>
            </div>
          </div>

          <!-- Annotations -->
          <div class="detail-section" *ngIf="item.annotations">
            <div class="section-title">{{ 'annotation' | i18n }}</div>
            <div class="alert-annotations">
              <div *ngFor="let anno of item.annotations | keyvalue" class="annotation-item">
                <span class="annotation-key">{{ anno.key }}:</span>
                <span class="annotation-value">{{ anno.value }}</span>
              </div>
            </div>
          </div>

          <!-- Time Info -->
          <div class="detail-section">
            <div class="section-title">{{ 'alert.center.time' | i18n }}</div>
            <div class="time-info">
              <div class="time-item">
                <span class="time-label">{{ 'alert.center.first-time' | i18n }}:</span>
                <span class="time-value">{{ item.startAt | date : 'yyyy-MM-dd HH:mm:ss' }}</span>
              </div>
              <div *ngIf="item.activeAt" class="time-item">
                <span class="time-label">{{ 'alert.center.last-time' | i18n }}:</span>
                <span class="time-value">{{ item.activeAt | date : 'yyyy-MM-dd HH:mm:ss' }}</span>
              </div>
              <div *ngIf="item.endAt" class="time-item">
                <span class="time-label">{{ 'alert.center.end-time' | i18n }}:</span>
                <span class="time-value">{{ item.endAt | date : 'yyyy-MM-dd HH:mm:ss' }}</span>
              </div>
            </div>
          </div>
        </nz-collapse-panel>
      </nz-collapse>
    </div>
  </nz-card>
</div>

<nz-pagination
  class="pagination"
  [nzTotal]="total"
  [(nzPageIndex)]="pageIndex"
  [(nzPageSize)]="pageSize"
  [nzShowSizeChanger]="true"
  [nzShowQuickJumper]="true"
  [nzShowTotal]="rangeTemplate"
  (nzPageIndexChange)="loadAlertsTable()"
  (nzPageSizeChange)="loadAlertsTable()"
></nz-pagination>

<ng-template #rangeTemplate let-range="range" let-total> {{ 'common.total' | i18n }} {{ total }} </ng-template>
